<script lang="ts" setup>
import { useAppStore } from '@/mobile/stores/app';
import { useFetch } from '@/mobile/hooks/fetch';
import { useAsyncData } from '@/mobile/hooks/async-data';

const { $fetch } = useFetch();
const appStore = useAppStore();
const communityInfo = appStore.config;
const userInfo = appStore.user;

const { data: isMember, refresh } = useAsyncData(
  'home:isMember',
  () => userInfo.id && $fetch('/user/isMembers'),
);

const joinCommunity = async (refreshPage: boolean = false) => {
  const { isSuccess } = await $fetch('/user/joinCommunity', {
    autoGotoLogin: true,
  });

  if (isSuccess) {
    if (refreshPage) {
      window.location.reload();
    }
    else {
      refresh();
    }
  } else {
    console.log('fail');
  }
};
</script>

<template>
  <div class="relative h-24">
    <div class="absolute top--24px mx-auto h-48 w-350 flex-y-center justify-between border-2 border-#fff rounded-4 bg-[linear-gradient(180deg,#f4f5f8_0%,#fcfdfe_100%)] p-8 shadow-[0_0_6px_0_rgba(0,0,0,0.06)]">
      <div class="flex-y-center gap-8">
        <div class="h-28 w-28 flex-shrink-0 rounded-4 bg-hex-fff">
          <img :src="communityInfo.headLogo" class="block h-full w-full object-cover" :alt="communityInfo.name" v-if="communityInfo.headLogo">
        </div>
        <h3 class="max-w-200 truncate text-14 text-#292929 font-500 leading-20">{{ communityInfo.name }}</h3>
      </div>
      <button type="button" class="h-28 rounded-4 bg-#3d7cfa px-16 py-6 text-12 text-#fff font-400 leading-16" @click="joinCommunity(true)">
        {{ isMember ? $t('mobile.home.communityCard.joined') : $t('mobile.home.communityCard.join') }}
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
